<template>
  <div class="empty-wrapper">
    <div class="empty-wrapper-content">
      <a-empty :description="description" />
      <a-button type="primary" @click="emit('add')">
        <template #icon>
          <icon-plus />
        </template>
        <slot>{{ btnText }}</slot>
      </a-button>
    </div>
  </div>
</template>
<script setup>
  defineProps({
    description: {
      type: String,
      default: '暂无数据',
    },
    btnText: {
      type: String,
      default: '添加',
    },
  })
  const emit = defineEmits(['add'])
</script>
<style lang="less" scoped>
  .empty-wrapper {
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -55px;
    margin-top: -80px;
    :deep(.arco-empty) {
      .arco-empty-description {
        color: #d8d8d8;
        font-size: 12px;
      }
      .arco-icon {
        color: #d8d8d8;
      }
    }
  }
</style>
